<template>
  <div class="bg-gray3-color main">
    <img :src="logoSrc" />
    <Form
      ref="form"
      :validOnChange="validOnChange"
      :showErrorTip="showErrorTip"
      :labelPosition="labelPosition"
      :rules="rules"
      :model="form"
    >
      <FormItem label="用户名" prop="user">
        <template v-slot:label><i class="h-icon-user"></i> 用户 </template>
        <input type="text" v-wordlimit="25" v-model="form.user" />
      </FormItem>
      <FormItem label="密码" prop="pwd">
        <template v-slot:label><i class="h-icon-lock"></i> 密码 </template>
        <input
          type="password"
          v-wordlimit="25"
          v-model="form.pwd"
          @keyup.enter="submit"
        />
      </FormItem>
      <FormItem>
        <Button
          size="l"
          color="primary h-btn-block"
          :loading="isLoading"
          @click="submit"
          >提交</Button
        >
      </FormItem>
    </Form>
  </div>
</template>
<script>
import logoSrc from "@/assets/logo.png";
import md5 from "md5";
export default {
  name: "login",
  data() {
    return {
      logoSrc,
      isLoading: false,
      labelPosition: "right",
      form: {
        user: "",
        pwd: ""
        // 还需要MD5加密
      },
      rules: {
        required: ["user", "pwd"]
      },
      showErrorTip: true,
      validOnChange: true
    };
  },
  methods: {
    async submit() {
      this.isLoading = true;
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let res = await this.$post("/api/login", {
          admin_user: this.form.user,
          admin_pwd: md5(this.form.pwd)
        });
        switch (res.code) {
          case 200:
            this.$Message.success("登录成功");
            window.localStorage.token = res.data;
            this.$router.push("/home");
            break;
          default:
            this.$Message.error(res.message);
            setTimeout(() => {
              this.btnDisabled = false;
            }, 3000);
            break;
        }
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      } else {
        this.isLoading = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 100px;
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
  .h-form {
    margin: 0 auto;
    width: 500px;
    min-width: 400px;
    .h-form-item {
      max-width: 100%;
    }
  }
}
</style>